<template>
       <!-- 歌曲列表 -->
        <div class="detailList" v-if="detailTxt.length !== 0">
             <ul id="song" class="clearfix">
                <li v-for="(item,index) in detailTxt.tracks" :key="index" class="clearfix" @click="songDetail(item.id,songList,index)">
                    <div class="detailSong">
                         <div class="num">
                            {{index+1}}
                        </div>
                        <div class="names">
                            <p class="name">{{item.name}}</p>
                            <span class="name1">{{item.ar[0].name}}</span>
                            <span class="name1">--{{item.name}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
</template>
<script>
import axios from "axios";
export default {
    data:function(){
        return{
            songid:"",
            detailTxt:[],
            songList:[]
    
        }
    },
    created:function(){
        this.songid = this.$parent.$route.query.id;
    },
    mounted:function(){
        var that = this;
        this.axios.get("playlist/detail?timestamp=1503",{
            params:{
                id:this.songid
            }
        }).then(function(res){
            that.detailTxt = res.data.playlist;
            //songList 数组，每个数组装着对象
            that.songList = res.data.playlist.trackIds;
            for(let i=0;i<that.songList.length;i++){
                that.songList[i] = that.songList[i].id;
            }
        })
    },
    methods:{
        songDetail:function(songid,arr,index){

            this.$store.commit("change",{
                playState:true,
                id:songid
            });
            this.$parent.$parent.$refs.player.getSong(); 
            this.$store.commit("changlist",{songList:arr,index:index});
            this.$router.push({path:"/songdetail",query:{id:songid}});

        }
    }
}
</script>
<style lang="scss">
    .active{
        background:rgb(212, 209, 212);
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
     .detailList{
         width:100vw;
         overflow: hidden;
         h3{
             width:100vw;
             height:30px;
             line-height:30px;
            
         }
         #song{
             width:100vw;
             margin-top:3vh;
             li{
                 list-style:none;
                 width:100%;
                 padding-bottom:3vh;
                  border-bottom:1px solid #f6f6f7;
                 .detailSong{
                     width:100vw;
                     float:left;
                      .num{
                            float:left;
                            width:10vw;
                            height:6vh;
                            line-height:6vh;
                            text-align: center;
                            color:#df3436;
                        }
                        .names{
                            float:left;
                            width:90vw;
                            .name{
                            font-size:18px;
                            color:#333;
                            }
                            .name1{
                                display:inline-block;
                                font-size:14px;
                                color:#888;
                            }
                        }
                    
                 }
             }
         }
     }
</style>